<template>
  <div>
    <!-- 检索与添加 -->
    <div>
      <el-row style="margin: 10px" :gutter="10">
        <el-col span="1">
          <el-button  @click="searchCollapseShowFun()" type="primary"
            ><el-icon><search /></el-icon>高级检索</el-button
          >
        </el-col>

        <el-col span="1">
          <AddInfo />
        </el-col>

      </el-row>
    </div>

    <!-- 高级检索 -->
    <div>
      <!-- 折叠面板 -->
      <el-collapse class="searchHead" v-model="showSearch">
        <el-collapse-item name="search">
          <template #title
            ><el-icon size="15px"><Search /></el-icon
            >&nbsp;&nbsp;&nbsp;高级检索</template
          >

          <!-- 表单数据排版 -->
          <el-form ref="selectForm">
            <!-- 第一行 -->
            <el-row :gutter="56">
              <el-col :offset="2" :span="6"
                ><el-form-item label="所属项目"
                  ><el-select v-model="selectForm.projectId">
                    <el-option
                      v-for="item in projectList"
                      :key="item.id"
                      :label="item.projectName"
                      :value="item.id"
                    ></el-option> </el-select></el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item label="财务类型">
                  <el-select
                    v-model="selectForm.financeType"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="支出" value="支出"></el-option>
                    <el-option label="入账" value="入账"></el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item label="当前状态"
                  >
                  <el-select
                    v-model="selectForm.currentStatus"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="提交" value= 0 ></el-option>
                    <el-option label="保存" value= 1 ></el-option>
                  </el-select> 
                  </el-form-item
              ></el-col>
            </el-row>

            <!-- 第三行 -->
            <el-row>
              <el-col :offset="2" :span="9">
                <el-form-item label="发生时间">
                  <template style="display: flex">
                    <el-date-picker
                      placeholder="起始时间"
                      style="width: 150px"
                      v-model="selectForm.accurrentTimeBegin"
                    />
                    <span>&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;</span>
                    <el-date-picker
                      placeholder="结束时间"
                      style="width: 150px"
                      v-model="selectForm.accurrentTimeEnd"
                    />
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-button @click="this.getFinanceInfo(this.pageNum)"
                >查询</el-button
              >
              <el-button
                @click="
                  this.selectForm = {};
                  this.getFinanceInfo(this.pageNum);
                "
                >清空</el-button
              >
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

    <Detail ref="financeDetail" />
    <Update ref="financeUpdate" />

    <el-table
      :data="tableData"
      style="width: 100%"
      border="true"
      max-height="65vh"
      height="65vh"
      v-loading="loading"
      element-loading-text="Loading..."
      :default-sort="{ prop: 'publishDate', order: 'descending' }"
    >
      <template #empty>
        <el-empty description="未查询到数据"></el-empty>
      </template>
      <el-table-column
        type="index"
        label="序号"
        width="60px"
        align="center"
      ></el-table-column>
      
      <el-table-column
        prop="projectName"
        label="所属项目"
        align="center"
      >
      <template #default="scope">
        <router-link :to="{path: '/Project', query: { projectName:scope.row.projectName}}">
          {{scope.row.projectName}}
        </router-link>
      </template>
      </el-table-column>

      <el-table-column prop="financeType" label="财务类型" align="center">
        <template #default="scope">
          <template v-if="scope.row.financeType == '支出'">
            <el-tag class="ml-2" size="large" type="danger">支出</el-tag>
          </template>
          <template v-if="scope.row.financeType == '入账'">
            <el-tag class="ml-2" size="large" type="success">入账</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="financeTotal"
        label="金额"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="accurrentTime"
        label="发生时间"
        align="center"
      ></el-table-column>
      <el-table-column prop="currentStatus" label="当前状态" align="center">
        <template #default="scope">
          <template v-if="scope.row.currentStatus == '1'">
            <el-tag class="ml-2" size="large" type="danger">保存</el-tag>
          </template>
          <template v-if="scope.row.currentStatus == '0'">
            <el-tag class="ml-2" size="large" type="success">提交</el-tag>
          </template>
        </template>
      </el-table-column>

      <el-table-column prop="" label="操作" align="center" width="250">
        <template #default="scope">
          <el-button-group>
            <el-button type="primary" @click="detailInfo(scope.row.id)"
              >详情</el-button
            >
            <el-button
              type="primary"
              @click="this.$refs.financeUpdate.showDialog(scope.row.id)"
              v-if="scope.row.currentStatus == '1'"
              >修改</el-button
            >
            <el-button
              type="danger"
              @click="delectInfo(scope.row.id)"
              v-if="scope.row.currentStatus == '1'"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      background="true"
    >
    </el-pagination>
  </div>
</template>
<script>
import { Search, Document } from "@element-plus/icons";
import AddInfo from "./financeInfoAdd.vue";
import axios from "../../utils/request";
import { ElNotification } from "element-plus";
import Detail from "./financeInfoDetail.vue"
import Update from "./financeInfoUpdate.vue"
export default {
  components: { Search, Document, AddInfo,Detail,Update},
  data() {
    return {
      selectForm: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      loading: false,
      pageNum: 1,
      searchSenior:false,
      showSearch:''
    };
  },
  methods: {
    /**
      获取所有财务信息
     */
    getFinanceInfo(pageNum) {
      this.selectForm.projectId = this.$route.query.projectId;
      this.loading = true;
      axios({
        method: "post",
        url: "/financeInfos/searchInfo/" + pageNum + "/" + this.pageSize,
        data: this.selectForm,
      }).then((res) => {
        this.tableData = res.data.data.pageInfo.list;
        this.total = res.data.data.pageInfo.total;
        // console.log(res);
        this.loading = false;
        this.selectForm.projectId = null;
      });
    },
    /**
      换页函数
     */
    handleCurrentChange(val) {
      this.getCompanyInfo(this.currentPage);
      this.currentPage = val;
    },
    /**
      获取项目列表
     */
    getProjectList() {
      axios.get("/ProjectInfo/projectList").then((res) => {
        this.projectList = res.data.data.projectList;
      });
    },
    /**
     * 数据删除函数
     */
    delectInfo(id){
      axios.get("/financeInfos/delete",{params:{id:id}}).then((res) => {
        ElNotification.success(res.data.message);
        this.getFinanceInfo(this.currentPage);
      });
    },
    /**
     * 详情函数
     */
    detailInfo(id){
      this.$refs.financeDetail.showDialog(id);
    },

    /**
     * 高级搜索展开与关闭
     */
    searchCollapseShowFun() {
      this.searchSenior = !this.searchSenior;
      if (this.searchSenior) {
        this.showSearch = "search";
      } else {
        this.showSearch = "";
      }
    },
  },
  mounted() {
    this.getFinanceInfo(this.pageNum);
    this.getProjectList();
  },
};
</script>

